<template>
  <view class="scrollAllWrap">
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallbcak"
      :up="upOption"
      @up="upCallback"
      top="10px"
    >
      <view v-for="(item, index) in orderList" :key="index">
        <view class="order-content">
          <view class="top-content">
            <view class="top-content-type">{{
              $utils.parDictLabel(refundStateList, item.refundState) || '未知'
            }}</view>
            <view class="top-content-status">
              <text
                v-if="item.auditState === 1 && (item.refundState === 0 || item.refundState === 2)"
                @click="refundQuery(item.id)"
              >
                查询
              </text>
              <text v-if="item.auditState == 0" @click="refundAudit(item)"> 审核 </text>
              <text
                v-if="item.auditState === 1 && item.refundState != 1"
                @click="handleOnline(item)"
              >
                退款
              </text>
              <text
                v-if="item.auditState === 1 && item.refundState != 1"
                @click="refundOutline(item)"
              >
                线下退款
              </text>
            </view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">退款类型:</view>
            <view class="desc-item-value">
              {{ $utils.parDictLabel(refundTypeList, item.refundType) || '' }}</view
            >
          </view>
          <view class="desc-item">
            <view class="desc-item-label">审核状态:</view>
            <view class="desc-item-value">
              {{ $utils.parDictLabel(auditStateList, item.auditState) || '待审核' }}</view
            >
          </view>
          <view class="desc-item">
            <view class="desc-item-label">手机号:</view>
            <view class="desc-item-value">{{ item.mobile || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">车牌号:</view>
            <view class="desc-item-value">{{ item.carNum || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">订单号:</view>
            <view class="desc-item-value">{{ item.orderNo || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">退单号:</view>
            <view class="desc-item-value">{{ item.outRefundNo || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">退款金额:</view>
            <view class="desc-item-value">{{ item.refundAmount || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">扣款金额:</view>
            <view class="desc-item-value">{{ item.chargeAmount || '0' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">订单金额:</view>
            <view class="desc-item-value">{{ item.orderPrice || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">申请日期:</view>
            <view class="desc-item-value">{{ item.gmtTime || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">备注:</view>
            <view class="desc-item-value">{{ item.remark || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">退款原因:</view>
            <view class="desc-item-value">{{ item.reason || '--' }}</view>
          </view>
          <view class="desc-item">
            <view class="desc-item-label">审核备注:</view>
            <view class="desc-item-value">{{ item.auditReason || '--' }}</view>
          </view>
          <view class="desc-item" v-if="item.transferVoucher">
            <view class="desc-item-label">打款凭证:</view>
            <view class="desc-item-value">
              <image
                style="width: 100%"
                :src="ossPreview + item.transferVoucher"
                @click="showPreviewImage(ossPreview + item.transferVoucher)"
              />
            </view>
          </view>
        </view>
      </view>
    </mescroll-uni>

    <!--底部-->
    <view class="bottom">
      <view class="bottom_text" @click="show = true">
        <u-icon name="search"></u-icon>
        <text class="search">搜索</text>
      </view>
      <view class="sub">总条目: {{ total }} 条</view>
    </view>
    <!--搜索弹框-->
    <u-popup class="search-popup" v-model="show" width="80%">
      <view class="input">
        <text>手机号</text>
        <input
          class="uni-input"
          type="text"
          @input="onMobileChange"
          :value="queryForm.mobile"
          placeholder="请输入手机号"
          maxlength="8"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>车牌号</text>
        <input
          class="uni-input"
          type="text"
          @input="onCarNumChange"
          :value="queryForm.carNum"
          placeholder="请输入车牌号"
          maxlength="8"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>订单号</text>
        <input
          class="uni-input"
          type="text"
          @input="onOrderNumChange"
          :value="queryForm.orderNo"
          placeholder="请输入订单号"
          maxlength="32"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>退款单</text>
        <input
          class="uni-input"
          type="text"
          @input="onRefundNoChange"
          :value="queryForm.outRefundNo"
          placeholder="请输入退款单号"
          maxlength="32"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>退款状态</text>
        <picker
          mode="selector"
          @change="onRefundStateChange"
          :range-key="rangeKey"
          :value="queryForm.refundState"
          :range="refundStateList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(refundStateList, queryForm.refundState) || '请选择退款状态'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>退款类型</text>
        <picker
          mode="selector"
          @change="onRefundTypeChange"
          :range-key="rangeKey"
          :value="queryForm.refundType"
          :range="refundTypeList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(refundTypeList, queryForm.refundType) || '请选择退款类型'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>审核状态</text>
        <picker
          mode="selector"
          @change="onAuditStateChange"
          :range-key="rangeKey"
          :value="queryForm.auditState"
          :range="auditStateList"
        >
          <view class="uni-input">{{
            $utils.parDictLabel(auditStateList, queryForm.auditState) || '请选择审核状态'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>

      <view class="search-warp">
        <view class="search-warp-btn  left" @click="search">
          <u-icon name="search"></u-icon>
          <text class="search">搜索</text>
        </view>

        <view class="search-warp-btn right" @click="reset">
          <u-icon name="reload"></u-icon>
          <text class="search">重置</text>
        </view>
      </view>

      <view class="close-btn" @click="show = false">关闭</view>
    </u-popup>
    <!--提现审核-->
    <u-popup class="card-popup" v-model="editpopup" mode="center" border-radius="16" length="90%">
      <view class="input">
        <text class="color-red">订单实付</text>
        <input
          class="uni-input color-red"
          type="text"
          disabled="true"
          :value="curItem.orderPrice"
        />
      </view>
      <view class="input">
        <text class="color-red">原扣款金额</text>
        <input
          class="uni-input color-red"
          type="text"
          disabled="true"
          :value="curItem.chargeAmount || 0"
        />
        <text v-if="isChg" class="audit_btn" @click="doRollBack">还原金额</text>
        <text v-else class="audit_btn" @click="doChgAmount">修改金额</text>
      </view>
      <view class="input" v-if="isChg">
        <text class="color-red">扣款金额</text>
        <picker
          mode="selector"
          @change="onEditChargeAmountChange"
          :range-key="rangeKey"
          :value="form.chargeAmount"
          :range="orderChargeList"
        >
          <view class="uni-input color-red">{{
            parKkAmountLabel(form.chargeAmount) || '请选择扣款金额'
          }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>审核结果</text>
        <picker
          mode="selector"
          @change="onEditAuditStateChange"
          :range-key="auditRangeKey"
          :value="form.auditState"
          :range="auditResultList"
        >
          <view class="uni-input">{{ parAuditLabel(form.auditState) || '请选择审核结果' }}</view>
        </picker>
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="input">
        <text>审核备注</text>
        <input
          class="uni-input"
          type="text"
          :value="form.remark"
          @input="onEditAuditRemarkChange"
          placeholder="请输入审核备注"
          maxlength="100"
        />
        <u-icon name="arrow-right" color="#2979ff" size="28"></u-icon>
      </view>
      <view class="button">
        <view class="cancel" @click="editpopup = false">取消</view>
        <view class="sub" @click="confirmAudit()">确定</view>
      </view>
    </u-popup>

    <u-modal
      v-model="showModal"
      title="提示"
      :content="confirmMsg"
      show-cancel-button="“true”"
      confirmText="确定"
      cancel-text="取消"
      @confirm="fetchPreCheck()"
    ></u-modal>

    <u-modal
      v-model="preCheckModel"
      title="提示"
      :content="preCheckMsg"
      show-cancel-button="“true”"
      confirmText="金额无误，继续退款"
      cancel-text="我要重新审核"
      @confirm="fetchAudit()"
    ></u-modal>

    <!-- 原路退款提示   -->
    <u-modal
      v-model="showOnlineTk"
      title="提示"
      content="您确定要执行退款请求吗？"
      show-cancel-button="“true”"
      confirmText="确定退款"
      cancel-text="再想想"
      @confirm="fetchOnlineTk()"
    ></u-modal>
    <!--  线下退款  -->
    <u-popup
      class="card-popup"
      v-model="showOutlineTk"
      mode="center"
      border-radius="16"
      length="90%"
    >
      <view class="picture-item">
        <view>
          <image
            class="imgage"
            v-if="tempImgUrl"
            :src="tempImgUrl"
            @click="showPreviewImage(tempImgUrl)"
          />
          <image
            class="imgageDefault"
            v-else
            src="../../static/images/upload.png"
            @click="sendChoosePic()"
          />
        </view>
      </view>
      <view class="button">
        <view class="cancel" @click="showOutlineTk = false">取消</view>
        <view class="sub" @click="manuSubmit()">确定</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { mapGetters } from 'vuex';
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      ossPreview: 'https://haoleidjsc.oss-cn-shanghai.aliyuncs.com/',
      rangeKey: 'dictLabel',
      auditRangeKey: 'label',
      show: false,
      showModal: false,
      isChg: false,
      editpopup: false,
      showOnlineTk: false,
      showOutlineTk: false,
      beginTimePicker: false,
      endTimePicker: false,
      orderList: [],
      total: 0,
      queryForm: {
        pageNum: 1,
        pageSize: 10,
        outRefundNo: '',
        orderNo: '',
        mobile: '',
        carNum: '',
        refundState: '',
        refundType: '',
        auditState: '',
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: true,
        minute: true,
        second: true,
      },
      form: {
        id: undefined,
        auditReason: undefined,
        auditState: '',
        chargeAmount: undefined,
      },
      curItem: {},
      refundStateList: [],
      refundTypeList: [],
      auditStateList: [],
      auditResultList: [
        {
          label: '审核通过',
          value: '1',
        },
        {
          label: '审核拒绝',
          value: '2',
        },
      ],
      orderChargeList: [],
      confirmMsg: '',
      downOption: {
        auto: false, // 是否在初始化后，自动执行downCallback
        autoShowLoading: true, // 显示下拉刷新的进度条
        textColor: '#fff', // 下拉刷新文本颜色
      },
      upOption: {
        auto: false,
        textNoMore: '-- END --',
        empty: {
          use: true,
          tip: '暂无信息',
        },
      },
      tempImgUrl: '',
      transferVoucher: '',
      preCheckMsg: '',
      preCheckModel: false,
    };
  },
  onShow() {
    this.downCallbcak();
  },
  created() {
    this.fetchRefundState();
    this.fetchRefundType();
    this.fetchRefundAuditState();
    this.fetchOrderChargeList();
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  methods: {
    /*退款金额*/
    fetchOrderChargeList() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'order_charge',
        })
        .then(res => {
          if (res.code === 200) {
            this.orderChargeList = res.data;
          }
        });
    },
    /*加载退款状态数据字典*/
    fetchRefundState() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'refund_state',
        })
        .then(res => {
          if (res.code === 200) {
            this.refundStateList = res.data;
          }
        });
    },
    /*加载退款类型*/
    fetchRefundType() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'refund_type',
        })
        .then(res => {
          if (res.code === 200) {
            this.refundTypeList = res.data;
          }
        });
    },
    /*加载退款审核状态*/
    fetchRefundAuditState() {
      this.$clApi.haoleiAgentApi
        .fetchDict({
          dictType: 'refund_audit_state',
        })
        .then(res => {
          if (res.code === 200) {
            this.auditStateList = res.data;
          }
        });
    },
    onCarNumChange(e) {
      this.queryForm.carNum = e.target.value && e.target.value;
    },
    onOrderNumChange(e) {
      this.queryForm.orderNo = e.target.value && e.target.value;
    },
    onRefundNoChange(e) {
      this.queryForm.outRefundNo = e.target.value && e.target.value;
    },
    onMobileChange(e) {
      this.queryForm.mobile = e.target.value && e.target.value;
    },
    onRefundStateChange(e) {
      this.queryForm.refundState = this.refundStateList[e.target.value].dictValue;
    },
    onRefundTypeChange(e) {
      this.queryForm.refundType = this.refundTypeList[e.target.value].dictValue;
    },
    onAuditStateChange(e) {
      this.queryForm.auditState = this.auditStateList[e.target.value].dictValue;
    },
    onEditAuditStateChange(e) {
      this.form.auditState = this.auditResultList[e.target.value].value;
    },
    onEditChargeAmountChange(e) {
      console.log('退款金额改变');
      this.form.chargeAmount = this.orderChargeList[e.target.value].dictValue;
      console.log('退款金额：' + this.form.chargeAmount);
    },
    onEditAuditRemarkChange(e) {
      this.form.auditReason = e.target.value && e.target.value;
    },
    downCallbcak() {
      this.$nextTick(() => {
        this.queryForm.pageNum = 1;
        this.orderList = [];
        this.mescroll && this.mescroll.resetUpScroll(true);
      });
    },
    upCallback() {
      this.init();
    },
    search() {
      this.queryForm.pageNum = 1;
      this.orderList = [];
      this.show = false;
      this.init();
    },
    reset() {
      this.queryForm = {
        pageNum: 1,
        pageSize: 10,
        outRefundNo: '',
        orderNo: '',
        mobile: '',
        carNum: '',
        refundState: '',
      };
    },
    init() {
      this.$clApi.haoleiAgentApi
        .fetchRefundList({
          data: this.queryForm,
        })
        .then(res => {
          if (res.code === 200) {
            this.queryForm.pageNum++;
            this.orderList = this.orderList.concat(res.rows);
            this.total = res.total;
            let pageSize =
              res.total % this.queryForm.pageSize == 0
                ? res.total / this.queryForm.pageSize
                : Math.ceil(res.total / this.queryForm.pageSize);
            this.mescroll.endSuccess(res.rows.length, pageSize >= this.queryForm.pageNum);
          } else {
            this.mescroll.endErr();
          }
        })
        .catch(() => {
          this.mescroll.endErr();
        });
    },
    /*退款查询*/
    refundQuery(id) {
      this.$clApi.haoleiAgentApi
        .fetchRefundQuery({
          data: {
            id: id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.search();
          }
        });
    },
    confirmAudit() {
      const data = this.form;
      if (!data.auditState) {
        this.$utils.toast('请选择审核结果');
        return;
      }
      if (!data.auditReason) {
        this.$utils.toast('为防止金额纠纷，请填写审核备注');
        return;
      }
      let confirmMsg = '';
      console.log('审核状态：' + data.auditState);
      if (data.auditState === '1') {
        if (this.form.chargeAmount) {
          confirmMsg =
            '原扣款金额为' +
            this.curItem.chargeAmount +
            '元，现修改为扣款' +
            data.chargeAmount +
            '元，是否确认金额无误，并执行退款操作？';
        } else {
          confirmMsg =
            '原扣款金额为' +
            this.curItem.chargeAmount +
            '元，您未修改退款金额，是否确认金额无误，并执行退款操作？';
        }
      } else {
        confirmMsg = '您拒绝了退款申请，是否确认操作无误？';
      }
      this.confirmMsg = confirmMsg;
      this.showModal = true;
      this.editpopup = false;
    },
    fetchPreCheck() {
      let data = this.form;
      if (data.auditState === '1') {
        this.fetchPreCheckRefund();
      } else {
        this.fetchAudit();
      }
    },
    fetchPreCheckRefund() {
      this.$clApi.haoleiAgentApi
        .fetchRefundPreCheck({
          data: {
            type: 'refund',
            orderId: this.form.id,
          },
        })
        .then(res => {
          if (res.subCode && res.subCode == 500) {
            this.preCheckMsg = res.msg;
            this.showModal = false;
            this.preCheckModel = true;
          } else {
            this.fetchAudit();
          }
        });
    },
    fetchAudit() {
      this.$clApi.haoleiAgentApi
        .fetchRefundAudit({
          data: this.form,
        })
        .then(res => {
          if (res.code === 200) {
            this.$utils.toast(res.msg);
            this.search();
          }
        });
    },
    /*退款审核*/
    refundAudit(item) {
      this.curItem = item;
      this.resetForm(item);
      this.editpopup = true;
    },

    /** 线上退款按钮操作 */
    handleOnline(item) {
      this.curItem = item;
      this.showOnlineTk = true;
    },
    /** 线下退款按钮操作 */
    refundOutline(item) {
      this.curItem = item;
      this.showOutlineTk = true;
      this.tempImgUrl = '';
      this.transferVoucher = '';
    },
    // 线上退款
    fetchOnlineTk() {
      this.$clApi.haoleiAgentApi
        .fetchOnlineRefund({
          data: {
            id: this.curItem.id,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.showOnlineTk = false;
            this.$utils.toast(res.msg);
            this.search();
          }
        });
    },

    // 表单重置
    resetForm(row) {
      this.form = {
        id: row.id,
        auditReason: undefined,
        auditState: '',
        chargeAmount: undefined,
      };
    },
    doRollBack() {
      this.isChg = false;
      this.form.chargeAmount = undefined;
    },
    doChgAmount() {
      this.isChg = true;
    },
    parAuditLabel(val) {
      if (!val) {
        return null;
      }
      let dict = this.auditResultList.filter(item => item.value == val);
      return dict[0].label;
    },
    parKkAmountLabel(val) {
      console.log('val:' + val);
      if (!val) {
        return null;
      }
      let dict = this.orderChargeList.filter(item => item.dictValue === val);
      return dict[0].dictLabel;
    },
    sendChoosePic() {
      const that = this;
      uni.chooseImage({
        // count:  允许上传的照片数量
        count: 1,
        // sizeType:  //original 原图，compressed 压缩图，默认二者都有
        sizeType: 'compressed',
        success(res) {
          console.log(111222, res);
          uni.showLoading({
            title: '加载中',
          });
          that.uploadPic(res.tempFilePaths[0]);
        },
        fail: res => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: '图片选取',
            duration: 3000,
            icon: 'none',
          });
        },
      });
    },
    uploadPic(picPath) {
      const that = this;
      uni.uploadFile({
        url: 'https://www.djsche.com/prod-api/common/upload/oss', //仅为示例，非真实的接口地址
        filePath: picPath,
        name: 'file',
        success: res => {
          console.log(1100000, res);
          uni.hideLoading();
          if (JSON.parse(res.data).code === 200) {
            // 上传成功再显示图片
            that.tempImgUrl = picPath;
            that.transferVoucher = JSON.parse(res.data).imgUrl;
          } else {
            uni.showToast({
              title: '图片上传失败',
              duration: 3000,
              icon: 'none',
            });
          }
        },
        fail: res => {
          console.log(res);
          uni.hideLoading();
          uni.showToast({
            title: '图片上传失败',
            duration: 3000,
            icon: 'none',
          });
        },
      });
    },
    showPreviewImage(e) {
      uni.previewImage({
        urls: [e],
        longPressActions: {
          success: function(data) {
            console.log(data);
          },
        },
      });
    },
    manuSubmit() {
      if (!this.curItem.id) {
        this.$utils.toast('请选择退款记录');
        return;
      }
      if (!this.transferVoucher) {
        this.$utils.toast('请上传打款凭证');
        return;
      }
      this.$clApi.haoleiAgentApi
        .fetchOutlineRefund({
          data: {
            id: this.curItem.id,
            transferVoucher: this.transferVoucher,
          },
        })
        .then(res => {
          if (res.code === 200) {
            this.showOnlineTk = false;
            this.$utils.toast(res.msg);
            this.search();
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.scrollAllWrap {
  /*height: calc(100vh - 100rpx);*/
  overflow-y: hidden;
  height: 100vh;
  background-color: #2a3a52;

  .bottom {
    width: 100%;
    text-align: center;
    height: 100rpx;
    color: #ee9a49;
    line-height: 100rpx;
    /*padding-top: 20rpx;*/
    position: fixed;
    bottom: 0;
    background-color: #2a3a52;
    z-index: 1;
    display: flex;
    .bottom_text {
      flex: 1;
      .search {
        padding: 20rpx;
      }
    }
    .sub {
      flex: 1;
      text-align: center;
      text-align: left;
    }
  }
  /*搜索框样式*/
  .search-popup {
    .input {
      padding-left: 10rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;

      .placeholder {
        color: #f6f7f9;
      }
      text {
        // position: absolute;
        // z-index: -1;
        // flex: 1;
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }
    }
    .search-warp {
      display: flex;
      width: 96%;
      margin: 20rpx auto;
      .search-warp-btn {
        width: 96%;
        height: 58rpx;
        line-height: 58rpx;
        border: 1rpx red solid;
        border-radius: 12rpx;
        margin: 20rpx auto;
        text-align: center;
        flex: 1;
        .search {
          margin-left: 20rpx;
        }
      }
      .left {
        margin-right: 5rpx;
        flex: 1;
      }
      .right {
        margin-left: 5rpx;
        flex: 1;
      }
    }
    .close-btn {
      width: 96%;
      height: 58rpx;
      line-height: 58rpx;
      border: 1rpx red solid;
      border-radius: 12rpx;
      margin: 20rpx auto;
      text-align: center;
    }
  }
  .order-content:last-child {
    margin-bottom: 100rpx;
  }
  .order-content {
    min-height: 320rpx;
    margin: 20rpx;
    padding: 40rpx;
    background: linear-gradient(135deg, #7692bb 0%, #425985 100%);
    border-radius: 16px;

    .top-content {
      display: flex;
      height: 80rpx;
      margin-bottom: 10rpx;
      line-height: 60rpx;
      border-bottom: 1rpx solid #dcdcdc;
      &-type {
        font-size: 36rpx;
        color: #fff;
      }
      &-status {
        font-size: 32rpx;
        color: #ffe471;
        flex: 1;
        text-align: right;
        text {
          margin-right: 10rpx;
          padding-left: 5rpx;
        }
      }
    }

    .desc-item {
      display: flex;
      min-height: 70rpx;
      font-size: 32rpx;
      color: #fff;
      line-height: 70rpx;

      &-label {
        width: 150rpx;
      }
      &-value {
        flex: 1;
        margin-left: 30rpx;
        padding-top: 8px;
        line-height: 40rpx;
      }
    }
  }
  .card-popup {
    .input {
      padding: 10rpx 20rpx;
      line-height: 102rpx;
      font-size: 30rpx;
      display: flex;
      color: #4e6792;
      .color-red {
        color: red;
      }
      .placeholder {
        color: #f6f7f9;
      }
      input,
      picker,
      u-picker {
        flex: 1;
        line-height: 102rpx;
        height: 102rpx;
        text-align: right;
        font-size: 30rpx;
        padding-right: 30rpx;
      }

      .uni-input-placeholder {
        /* WebKit browsers 适配谷歌 */
        color: #fff;
      }
      .uni-input-picker {
        padding-right: 30rpx;
      }
    }
    .button {
      margin: 20rpx;
      text-align: center;
      view {
        display: inline-block;
        width: 161rpx;
        height: 70rpx;
        line-height: 70rpx;
        border-radius: 35rpx;
        text-align: center;
        margin-top: 20rpx;
        margin-right: 20rpx;
      }
      .cancel {
        color: #b7c0cf;
        border: 1px solid #b7c0cf;
      }
      .sub {
        background: #ffe471;
        color: #4e6792;
      }
    }
  }
  .picture-item {
    margin: 20rpx 0;
    width: 80%;
    height: 160rpx;
    background-color: #fff;
    color: #fff;
    text-align: center;
    view {
      width: 100%;
      height: 120rpx;
      align-content: center;
      position: relative;
      icon {
        position: absolute;
        right: -20rpx;
        top: -20rpx;
      }
      .imgageDefault {
        width: 80%;
        height: 90%;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .imgage {
        width: 100%;
        height: 160rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }
  }
}
</style>
